import { Select, SelectProps } from "antd"
import { Rule } from "antd/es/form"
import { DefaultOptionType } from "antd/es/select"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import { useLocale } from "@/locales"

const NormalSelect: FC<{
	labelId: string
	options: { label: string; value: string | number }[]
	name: string
	mode?: "multiple" | "tags"
	maxTagCount?: number
	selectWidth?: string
	rules?: Rule[]
	otherProps?: SelectProps
	disabled?: boolean
	placeholder?: string
	allowClear?: boolean
	onChange?: (value: any, option?: DefaultOptionType | DefaultOptionType[]) => void
}> = props => {
	const { newFormat } = useLocale()
	const formatOptions = props.options
	return (
		<SFormItem name={props.name} label={newFormat(props.labelId)} rules={props.rules}>
			<Select
				allowClear={props.allowClear ?? true}
				placeholder={props.placeholder ?? newFormat("common.select_all")}
				options={formatOptions}
				mode={props.mode ?? undefined}
				maxTagCount={props.maxTagCount}
				style={{ minWidth: "160px", width: props.selectWidth }}
				disabled={props.disabled}
				{...props.otherProps}
				onChange={props.onChange}
			/>
		</SFormItem>
	)
}

export default NormalSelect
